<template>
  <section class="login" :style="[bg]" style="height: 100%;">
    <el-card class="box-card login__box-card">
      <h3 class="login__title"><img :src="loginImg"></h3>
      <el-form label-position='top' :model="form" @keyup.native.enter="login">
        <el-form-item>
          <el-input
            placeholder="请输入邮箱或手机号码"
            suffix-icon="fa fa-user"
            v-model="form.userName">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" placeholder="请输入密码" type="password" suffix-icon="fa fa-lock"/>
        </el-form-item>
        <el-form-item>
          <el-checkbox label="十天内免登录" v-model="form.rememberMe"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" class="login_el-button">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </section>
</template>

<script>
import SystemConstant from '@/constants/System'
import bg1 from '@/assets/images/bg/background1.jpg'
import bg2 from '@/assets/images/bg/background2.jpg'
import bg3 from '@/assets/images/bg/background3.jpg'
import bg4 from '@/assets/images/bg/background4.jpg'

const bgList = [bg1, bg2, bg3, bg4]
const bgColorList = ['#142551', '#202332', '#525862', '#000000']

export default {
  data () {
    return {
      loginImg: SystemConstant.LOGIN_LOGO,
      form: {
        userName: '',
        password: '',
        rememberMe: false
      }
    }
  },
  methods: {
    login: function () {
      this.$service.login.login(this.form).then(() => {
        this.$router.push(this.$route.query['redirect'] || '/main')
      })
    }
  },
  computed: {
    bg () {
      const idx = new Date().getTime() % 4
      return {
        background: 'url("' + bgList[idx] + '") center / 100% no-repeat',
        backgroundColor: bgColorList[idx]
      }
    }
  },
  created () {
    this.$service.login.isLogined().then(() => {
      this.$router.push('/main')
    }).catch(() => {
    })
  },
  destroyed () {
    window.onresize = null
    this.$message.closeAll()
  }
}
</script>

<style>

</style>
